<template>
<a-modal
  :open="open"
  :width="800"
  cancel-text="关闭"
  @ok="handleCancel"
  :mask-closable="false"
  @cancel="handleCancel"


>
  <div style="margin-bottom: 20px;display: flex">
    <a-form
      layout="inline"
      :label-col="{ span: 4 }"
      :wrapper-col="{ span: 20 }"
      @submit.prevent="querySearch"
    >
      <a-form-item label="姓名" >
        <a-input v-model:value="queryParam.search" placeholder="请输入姓名" />
      </a-form-item>
      <!--          <a-form-item label="身份证号">-->
      <!--            <a-input v-model:value="state.card_number" placeholder="请输入身份证号" />-->
      <!--          </a-form-item>-->
    </a-form>
    <a-button type="primary" @click="querySearch">搜索</a-button>
  </div>
  <div>
    <a-table
      size="middle"
      rowKey="id"
      :columns="columns"
      :data-source="dataSource"
      :pagination="ipagination"
      :loading="loading"
      :custom-row="clickThenSelect"
      @change="handleTableChange"

    >

      <template #status="{ record }">
        <a-tag v-if="record.checkStatus === 2" color="green">检查完成</a-tag>
        <a-tag v-else-if="record.checkStatus === 1" color="red">检查中</a-tag>
        <a-tag v-else-if="record.checkStatus === 0" color="orange">待检查</a-tag>
      </template>

      <template #action="{ record }">
        <a-button type="primary" @click="handleDetail(record)">详情</a-button>
      </template>

    </a-table>
  </div>

</a-modal>
</template>

<script>
import {createVNode, reactive, ref} from "vue";
import {userTableDataTemplate} from "./dataTemplate/userTable";
import axios from "axios";
import API_BASE_URL from "../config";
import {message, Modal} from "ant-design-vue";
import dayjs from "dayjs";
import {useStore} from 'vuex'
import showImage from "./showImage.vue";

export default {
  name: "SearchPatient",

  setup(props, {emit}) {

    const store = useStore()
    const open = ref(false)
    const showModal = () => {
      open.value = true
      loadData(1)
    }
    const handleCancel = () => {
      open.value = false
    }
    function onClearSelected(){
      state.selectedRowKeys = []
      state.selectedRows = []
    }
    const clickThenSelect = (record) => {
      return {
        onClick: () => {
          onSelectChange(record.checkSerial.split(','), [record])
          // onSelectChange('', [record])
        }
      }
    }
    const handleTableChange = (pagination, filters, sorter) => {
      //分页、排序、筛选变化时触发
      //TODO 筛选
      console.log(pagination)
      queryParam.page = pagination.current
      ipagination.current = pagination.current

      loadData()
    }

    const state = reactive({
      selectedRowKeys: [],
      selectedRows: []
    })
    const ipagination = reactive({
      current:1,
      pageSize: 9,
      showTotal: (total, range) => {
        return range[0] + '-' + range[1] + ' 共' + total + '条'
      },
      total: 0
    })
    const queryParam = reactive({
      page: ipagination.current,
      per_page: ipagination.pageSize,
      sort: 'desc',
    })
    const columns =  [
      {
        title: '检查序号',
        key: 'checkSerial',
        dataIndex: 'checkSerial',
        align: 'center'
      },
      {
        title: '姓名',
        key: 'checkName',
        dataIndex: 'checkName',
        align: 'center'
      },
      {
        title: '年龄',
        key: 'checkAge',
        dataIndex: 'checkAge',
        align: 'center'
      },
      {
        title: '检测部位',
        key: 'checkPart',
        dataIndex: 'checkPart',
        align: 'center'
      },
      {
        title: '检查时间',
        key: 'checkTime',
        dataIndex: 'checkTime',
        align: 'center',
      },

      {
        title: '状态',
        key: 'checkStatus',
        align: 'center',
        slots: { customRender: 'status' }
      },
      {
        title: '操作',
        key: 'action',
        align: 'center',
        slots: { customRender: 'action' }
      }
    ]
    const dataSource = ref([])
    const loading = ref(false)

    function loadData(arg) {
      if (arg === 1) {
        ipagination.current = 1
      }
      onClearSelected()
      loading.value = true

      axios.get(`${API_BASE_URL}/get-check-list`, {
        params: queryParam
      })
        .then((res) => {
          //设置数据
          let data = []
          data = res.data.data.items
          const newData = []
          if (!data) {
            return
          }
          for (let i = 0; i < data.length; i++) {
            let a = {}
            // console.log(data[i].created_at)
            let date = data[i].check_time
            a.checkDate = dayjs(date)
            a.checkTime = data[i].check_time
            a.checkAge = data[i].user_age
            a.checkSerial = data[i].check_serial
            a.checkDoctorId = data[i].doctor_id
            a.checkName = data[i].user_name
            a.userId = data[i].user_id
            a.checkSex = data[i].user_gender
            a.checkStatus = data[i].status
            a.checkId = data[i].id
            a.checkPart = data[i].parts
            if (data[i].report.image !== undefined) {
              a.imageUrlArray = data[i].report.image
            } else {
              a.imageUrlArray = []
            }
            newData.push(a)
          }
          dataSource.value = newData
          //设置总数
          ipagination.total = res.data.data.total_items
          loading.value = false
        })
    }

    const onSelectChange = (selectedRowKeys, selectedRows) => {
      console.log(selectedRowKeys, selectedRows)
      state.selectedRowKeys = selectedRowKeys
    }

    const querySearch = () => {
      console.log(queryParam)
      loadData(1)
    }

    const handleDetail = (record) => {
      Modal.info({
        title: '检查报告',
        width: 500,
        content: createVNode(showImage, {record}),
      })
    }




    return {
      open,
      columns,
      dataSource,
      loading,
      ipagination,
      state,
      queryParam,
      loadData,
      handleTableChange,
      querySearch,
      clickThenSelect,
      showModal,
      handleCancel,
      onSelectChange,
      handleDetail,
    }
  }
}
</script>

<style scoped>

</style>
